<template>
	<u-popup :show="visible" round="16rpx" mode="bottom" @close="hide">
		<view class="quick-group-more">
			<template v-if="title">
				<view class="quick-group-more__head">{{title}}</view>
				<view class="quick-group-more__gap" style="height: 16rpx;"></view>
			</template>

			<view class="quick-group-more__content">
				<template v-for="(item,index) in list">
					<view v-if="item.show&&item.value" :key="index" class="quick-group-more__content-btn bg-hover"
						@tap="itemClick(item,index)">{{item.name}}</view>

					<button v-if="item.show&&item.openType" :key="index"
						class="u-reset-button quick-group-more__content-btn bg-hover"
						:open-type="item.openType">{{item.name}}</button>
				</template>
			</view>

			<view class="quick-group-more__gap" style="height: 24rpx;"></view>

			<view class="quick-group-more__cancel">
				<view class="quick-group-more__cancel-btn bg-hover" @tap="hide">取消</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				visible: false,
				dataObj: {},
				dataIndex: null,
			}
		},
		methods: {
			show(rocord, index) {
				this.visible = true

				if (rocord) {
					this.dataObj = JSON.parse(JSON.stringify(rocord))
				}
				if (index != null) {
					this.dataIndex = index
				}
			},
			hide() {
				this.visible = false
				this.$emit('close')
			},
			itemClick(item, index) {
				let result = {
					value: item.value,
					index: index,
				}
				if (this.dataObj) {
					result.data = this.dataObj
				}
				if (this.dataIndex !== null) {
					result.dataIndex = this.dataIndex
				}
				this.$emit('itemClick', result)
				this.hide()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quick-group-more {

		.quick-group-more__head {
			height: 100rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;
			background-color: #fff;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;

			display: flex;
			justify-content: center;
			align-items: center;
		}

		.quick-group-more__gap {
			background-color: #F7F8FA;
		}

		.quick-group-more__content {

			.quick-group-more__content-btn {
				height: 116rpx;
				padding: 0 32rpx;
				font-size: 28rpx;
				color: #1D2129;
				background-color: #fff;

				display: flex;
				justify-content: center;
				align-items: center;
			}

			.quick-group-more__content-btn+.quick-group-more__content-btn {
				border-top: 2rpx solid #E5E6EB;
			}
		}

		.quick-group-more__cancel {
			.quick-group-more__cancel-btn {
				height: 116rpx;
				padding: 0 32rpx;
				font-size: 28rpx;
				color: #1D2129;
				background-color: #fff;

				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>